<template>
  <div class="mynav">
    <div @click="changuserinfo"><el-avatar style="margin-right: 20px;margin-top: 3px" size="large" src="circleUrl"></el-avatar></div>
    <span style="margin-right: 10px;margin-top: 10px; color: deepskyblue;font-size: medium">某某 欢迎你！</span>
    <span style="margin-right: 30px;margin-top: 8px;color: blue;font-size: large" @click="out" >{{userstatus}}</span>
  </div>
</template>

<script>
export default {
  name: "mynav",
  data() {
    return {
       status:false,
       userstatus:"sign out"
    }
  },
  methods:{
    changuserinfo(){
      this.$router.push('/userinfo');
    },
    out(){
      this.status=!this.status;
      this.userstatus=this.status?"sign on":"sign out";
    }
  }
}
</script>

<style scoped>
.mynav{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
  background:url("../assets/navback.png");
  height:80px;
  background-size:100% 100%;
}
</style>
